<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>消除积木</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="css/balance.min.css">
</head>
<body>
	<div id="balance">
		<div class="index" v-show="!isBegin">
			<div class="banner">
				<img src="img/banner.png" alt="">
			</div>
			<div class="begin" @click="begin" >
				<img src="img/btn_begin.png" alt="">
			</div>
		</div>

		<!--游戏规则提示-->
		<div class="hint" v-show="hint">
			<div class="con">
				<img src="img/notice.png" alt="">
				<button class="btn-continue mt30" @click="showHint">
					<img src="img/btn_continue.png" alt="">
				</button>
			</div>
		</div>

		<!--游戏开始-->
		<div class="game-box" v-show="playing">
			<div class="con">
				<div class="block">
					<transition>
						<img class="fl" :class="{downRight:!rightBlock}"  src="img/block.png" alt="" v-show="leftBlock" @click="hideBlock1">
					</transition>
					<transition>
						<img class="fr" :class="{downLeft:!leftBlock}" src="img/block.png" alt="" v-show="rightBlock" @click="hideBlock2">
					</transition>
				</div>
				<transition>
					<div class="line-x" :class="{rotateLeft:!leftBlock, rotateRight:!rightBlock, rotate0:rotate0 }">
						<img src="img/line_l.png" alt="">
					</div>
				</transition>
				<div class="line-y">
					<img src="img/line-b.png" alt="">
				</div>
			</div>
		</div>

		<!--游戏失败-->
		<div class="fail" v-show="fail">
			<div class="con text-center">
				<div class="pic"><img src="img/over.png" alt=""></div>
				<button class="btn btn-red" @click="again">再来一次</button>
				<button class="btn btn-blue">叫上小伙伴</button>
			</div>
		</div>

		<!--游戏胜利-->
		<div class="fail" v-show="victory">
			<div class="con text-center">
				<div class="pic"><img src="img/victory.jpg" alt=""></div>
				<button class="btn btn-yellow" onclick="drawALottery()">抽奖</button>
				<button class="btn btn-red" @click="again2">再来一次</button>
				<button class="btn btn-blue">叫上小伙伴</button>
			</div>
		</div>
	</div> <!--#balance end-->
	<script src="../common/js/common.js"></script>
	<script src="../common/lib/vue.min.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../utils/http-service.js"></script>
	<script>
		//游戏名称
		window.gameName = 'balance';
		//判断用户是否有抽奖(游戏)资格
		api.eligibleToPlay();
		//获取活动参数
		api.getGameConfig(gameName);
		//添加底部链接
		setFootLink('.index');

		const balance = new Vue({
			el: '#balance',
			data: {
			    isBegin:false, // 默认游戏没开始
				hint:false,  // 默认不显示游戏规则
                playing:false,
                leftBlock:true,
				rightBlock:true,
				leftClick:1,
				rightClick:1,
                rotate0:false, //两个盒子都消除掉了, 用这个属性控制css平衡
				fail:false,  //游戏失败
                victory:false,
                count:3, //游戏次数,
				result:'',
			},
			methods:{
			    begin:function () {
			    	if (limitNum <= 0) {
			    		Toast('抽奖次数不够');
			    		return;
			    	}
				    this.isBegin = !this.isBegin  // 关闭首页
				    this.hint = !this.hint   //显示规则
                },
                showHint:function () {
	                this.hint = !this.hint  //关闭规则
	                this.playing = !this.playing
                },
				hideBlock1:function () {
                    const that = this
                    if(!that.count){return}  // 游戏次数用完就不能再玩了
                    //  只能点击一次, 点击后num为0 , 判断为false, 再次点击不再执行
                    if(!this.leftClick){ return }

                    this.leftClick--

                    this.leftBlock = !this.leftBlock  //点击后改变方块状态为false, 隐藏, 消除

					setTimeout(function () {
					    console.log(!that.rightBlock)
					    //如果两个盒子都消除了
                        if(!that.rightBlock){  //如果右边方块也没有了, 则游戏胜利
                            if(that.result != ''){
                                return
                            } //如果中奖, 停止执行
                            that.result = 'left'

                            console.log('获得抽奖机会1')
                            that.rotate0 = !that.rotate0  //两个方块都消除了, 则获得平衡的clsss
	                        setTimeout(function () {
								that.victory = !that.victory
                                //出游戏结果后,次数减1
								that.count--
                            },1000)
						}else{
                            if(that.result != ''){
                                return
                            }//如果中奖, 停止执行
//                            that.result = 'left'
						    console.log('没有消除另一个盒子哦')
                            setTimeout(function () {
                                that.fail = !that.fail //显示失败信息
                                //出游戏结果后次数减一
                                that.count--
                            },1000)
						}
                    },1000)
                },
				hideBlock2:function () {
                    const that = this
                    if(!that.count){return}  // 游戏次数用完就不能再玩了
                    //只能点击一次, 点击后num为0 , 判断为false, 再次点击不再执行
                    if(!this.rightClick){ return }

                    this.rightClick--

					this.rightBlock = !this.rightBlock //点击后改变方块状态为false, 隐藏, 消除
                    setTimeout(function () {
                        console.log(!that.rightBlock)
                        //如果两个盒子都消除了
                        if(!that.leftBlock){  //如果左边方块也没有了, 则游戏胜利
                            if(that.result != ''){
                                return
                            }//如果中奖, 停止执行
                            that.result = 'right'

                            console.log('获得抽奖机会2')
                                that.rotate0 = !that.rotate0  //两个方块都消除了, 则获得平衡的clsss
                            setTimeout(function () {
                                that.victory = !that.victory
                                //出游戏结果后次数减一
                                that.count--
                            },1000)
                        }else{
                            console.log('没有消除另一个盒子哦')
                            setTimeout(function () {
                                that.fail = !that.fail //显示失败信息
                                //出游戏结果后次数减一
                                that.count--
                            },1000)
                        }

                    },1000)
                },
				again:function () {
					this.leftBlock = true
					this.rightBlock = true
					this.leftClick = 1
					this.rightClick = 1
					this.result = ''
					this.fail = false

                },  // 胜利再来一次
                again2:function () {
                    this.leftBlock = true
                    this.rightBlock = true
                    this.leftClick = 1
                    this.rightClick = 1
					this.result = ''
	                this.rotate0  = !this.rotate0  // 胜利后的totate为 true , 要重置为false, 不然会class不会消除, 动画效果无法执行
                    this.victory = false
                }  // 再来一次
			},
		})
	</script>
</body>
</html>